<template>
	<view class="height-screen">
		<cu-custom bgColor="bg-white">
			<block slot="content">{{$t('tabBar.group')}}</block>
		</cu-custom>

		<view class="bg-white">
			<u-tabs :list="tabList" :scrollable="false" lineColor="#06C168" :activeStyle="activeStyle"
				:current="tabCurrent" @change="handleChange"></u-tabs>
		</view>
		<view class="grid gap margin-ht padding-bottom-lg" style="margin-top: 20rpx;">
			<view class="bg-white radius-xs padding" v-for="(item,index) in dataList" :key="index">
				<view class="padding-bottom flex align-center u-border-bottom"
					@tap.stop="helper.routerNav('/pages/group/userInfo',{user_id:item.user_id})">
					<image :src="helper.handleImage(item.avatar)" class="flex-shrink round"
						style="width: 79rpx;height: 79rpx;" mode="aspectFill" />
					<view class="margin-left flex flex-direction flex-sub">
						<text class="text-df font-bold text-black margin-bottom-xs">{{item.nickname}}</text>
						<image v-if="item.gender == 0" src="@/static/img/sexType.png"
							style="width: 35rpx;height: 35rpx;" />
						<div v-else
							style="width: 30rpx;height: 30rpx;border-radius: 36rpx;background-color: #CBE3ED;text-align: center;line-height: 35rpx;">
							<u-icon name="man" color="#2979ff" size="15"></u-icon>
						</div>
					</view>
				</view>
				<view class="grid gap-sm padding-top">
					<text class="text-lg font-bold text-black"
						@tap.stop="helper.routerNav('/pages/group/groupDetail',{id:item.id})">{{item.title}}</text>
					<text class="text-df font-400 text-black"
						@tap.stop="helper.routerNav('/pages/group/groupDetail',{id:item.id})">{{item.content}}</text>
					<view class="" style="width:100%;display: flex;flex-wrap: wrap;">

						<view class="" v-for="(imgItem,imgIndex) in item.images" :key="imgIndex"
							style="height: 215rpx;width:33.33%;border-radius: 20rpx;position: relative;">
							<image :src="helper.handleImage(imgItem)" mode="aspectFill"
								style="height: 215rpx;width:100%;" @click="handleBigimg(imgItem,index)" />
							<view v-if="imgIndex==8" class="zzContent">
								<u-icon name="more-dot-fill" color="#ffffff" size="100"></u-icon>
							</view>
						</view>

						<view v-if="item.images.length<9" style="width:33.33%;height: 215rpx;position: relative;">
							<hello v-if="item.video_files" :src="item.video_files" class="video"></hello>
						</view>

					</view>
					<view class="flex justify-end">
						<view class="flex align-center">
							<image src="@/static/img/good.png" style="width: 28rpx;height: 29rpx;"
								v-if="item.praise_status==0" @tap.stop="handleLike(item.id,index,0)" />
							<image src="@/static/img/goodActive.png" style="width: 28rpx;height: 29rpx;" v-else
								@tap.stop="handleLike(item.id,index,1)" />
							<text class="text-df font-400 text-black margin-left-xs">{{$t('group.like')}}</text>
						</view>
						<view class="flex align-center margin-left-lg" @tap.stop="handleComment(item.id)">
							<image src="@/static/img/replay.png" style="width: 34rpx;height: 30rpx;" />
							<text class="text-df font-400 text-black margin-left-xs">{{$t('group.comment')}}</text>
						</view>
						<view class="flex align-center margin-left-lg">
							<view class="">
								<u-icon name="info-circle" color="#333333"></u-icon>
							</view>
							<text class="text-df font-400 text-black margin-left-xs">{{$t('group.report')}}</text>
						</view>
					</view>
				</view>
			</view>
			<section class="empty" v-if="!dataList.length">
				<u-empty mode="list" :text="$t('list.empty')" />
			</section>
		</view>

		<view v-if="token" class="successBtn" @tap.stop="helper.routerNav('/pages/group/releaseGroup')">
			<u-icon name="plus" color="#ffffff" size="26"></u-icon>
		</view>
		<submitComment ref="submitComment" @submitComment="submitComment" />
		<tabBar :currentTabbar="1" :placeholder="true" />
	</view>
</template>
<script>
	import DomVideoPlayer from '@/components/DomVideoPlayer/DomVideoPlayer';
	import submitComment from '@/components/submitComment.vue'
	import {
		bbsList,
		praise_add,
		praise_del,
		commentAdd,
		attentionArticleLists
	} from '@/apis'
	import tabBar from '@/components/tabBar.vue'
	export default {
		components: {
			submitComment,
			tabBar,
			DomVideoPlayer
		},
		data() {
			return {
				tabList: [{
					name: this.$t('group.referee')
				}, {
					name: this.$t('group.follow')
				}],
				activeStyle: {
					fontWeight: 'bold',
					fontSize: '30rpx',
					color: '#06C168'
				},
				dataList: [],
				page: 1,
				tabCurrent: 0,
				commentArticleId: '',
				token: uni.getStorageSync('token')
			}
		},
		onLoad() {
			this.page = 1
			this.dataList = []
			this.tabCurrent = 0
			this.bbsList()
		},
		onShow() {
			// this.page = 1
			// this.dataList = []
			// this.tabCurrent = 0
			// this.bbsList()
		},
		onPullDownRefresh() {
			this.page = 1
			this.dataList = []
			this.tabCurrent = 0
			this.bbsList()
			uni.stopPullDownRefresh();
		},
		methods: {
			handleBigimg(imglIST, index) {
				// console.log(imglIST)
				uni.previewImage({
					urls: [this.helper.handleImage(imglIST)], // 图片的链接列表
					current: index, // 当前显示图片的链接索引
				});
			},
			handleClick() {},
			videoPlay(event, index) {
				return
				let video = uni.createVideoContext("video" + index, this)
				video.play();
				for (var i = 0; i < this.dataList.length; i++) {
					if (i != index) {
						let video2 = uni.createVideoContext("video" + i, this);
						video2.pause();
					}
				}
			},
			handleChange(event) {
				this.tabCurrent = event.index
				this.page = 1
				this.dataList = []
				if (this.tabCurrent == 0) {
					this.bbsList()
				} else {
					this.attentionArticleLists()
				}
			},
			async bbsList() {
				const res = await bbsList({
					page: this.page
				})
				res.data.map(item => {
					item.images = item.images.length > 0 ? item.images.split(',') : []
				})
				res.data.map(item => {
					item.video_files = item.video_files != "" ? 'https://www.slem.com.au' + item.video_files :
						item
						.video_files
				})

				this.dataList = this.dataList.concat(...res.data)
				console.log("dataList", this.dataList)
			},
			async attentionArticleLists() {
				const res = await attentionArticleLists({
					page: this.page
				})
				res.data.map(item => {
					item.images = item.images.split(',')
				})
				this.dataList = this.dataList.concat(...res.data)
			},
			handleComment(id) {
				this.commentArticleId = id
				this.$refs.submitComment.opencomment()
			},
			async submitComment(event) {
				await commentAdd({
					article_id: this.commentArticleId,
					msg: event
				})
				this.helper.showToast(this.$t('message.success'))
			},
			async handleLike(id, index, isDel) {
				if (isDel == 0) {
					await praise_add({
						article_id: id
					})
				} else {
					await praise_del({
						article_id: id
					})
				}
				this.dataList[index].praise_status = this.dataList[index]
					.praise_status == 0 ? 1 : 0
			},
		}
	}
</script>
<style lang="scss" scoped>
	.zzContent {
		width: 100%;
		height: 215rpx;
		// border-radius: 20rpx;
		background-color: rgba(0, 0, 0, 0.7);
		// z-index: 999;
		position: absolute;
		top: 0;
		left: 0;
	}

	.successBtn {
		position: fixed;
		bottom: 300rpx;
		right: 25rpx;
		width: 90rpx;
		height: 90rpx;
		background: #06C168;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		z-index: 9999;
	}
</style>